<template>
  <view id="main">
    <!-- 顶部搜索框 -->
    <zy-topBar bgcolor="#A6E1FB" searchmargin="0" searchwidth="80%" scarchCenter showBack v-model="searchParam"
      @search="search" paddingTop="50" height="40">
    </zy-topBar>
    <view class="content">
      <scroll-view scroll-y>
        <view class="top flex">
          <image class="top_bg" src="@/static/icon/mg-bg.png" />
          <view class="left flex">
            <view class="btn fs_16 color_blue">同步废物信息</view>
          </view>
        </view>
        <view v-for="item in trashStore.trashList" class="item card">
          <view class="title fs_24 color_green">{{ item.name }}</view>
          <view class="msg flex">
            <view class="label">废物类型:</view>
            <view class="value">{{ item.type }}</view>
          </view>
          <view class="msg flex">
            <view class="label">废物代码:</view>
            <view class="value">{{ item.id }}</view>
          </view>
          <view class="msg flex">
            <view class="label">废物属性:</view>
            <view class="value">{{ item.Stats }}</view>
          </view>
          <view class="msg flex">
            <view class="label">废物状态:</view>
            <view class="value">{{ item.status }}</view>
          </view>
          <view class="msg flex">
            <view class="label">废物时间:</view>
            <view class="value">{{ item.time }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useTrashStore } from "@/stores/modules/trash/trash";
const trashStore = useTrashStore();
const searchParam = ref("");
const search = (val: string) => {
  console.log(val);
};
</script>

<style lang="scss" scoped>
scroll-view {
  height: calc(100vh - 80px);

  .top {
    position: relative;
    height: 200px;
    padding: 0 20px;
    justify-content: space-between;

    .left {
      flex-direction: column;

      .btn {
        position: absolute;
        top: 70%;
        left: 20px;
        transform: translateY(-50%);
        background-color: #fff;
        padding: 10px 12px;
        border-radius: 50px;
        margin: 8px 0;
      }
    }

    .top_bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }
  }

  .item {
    width: 92%;
    margin: 10px auto;
    border-radius: 7px;

    .msg {
      margin: 10px 0;
      font-size: 14px;
      justify-content: space-between;

      .label {
        color: #7c8190;
      }

      .value {
        color: #1d2541;
      }
    }
  }
}
</style>
